<template>
  <div>
    <content-header :title="actDetail.title"></content-header>
    <div class="header xui-padding-vertical-md">
      <img-box :imgSrc="actDetail.imgUrl" width="930" height="320"></img-box>
      <div class="header-content xui-margin-top-xl">
        <div class="title-content">
          <h3 class="xui-text-truncate">{{actDetail.title}}</h3>
        </div>
        <div class="xui-margin-bottom-lg xui-margin-top bodyFont" v-html="actDetail.content" ref="bodyFont" :class="{bodyHeight:isActive}"></div>
        <div class="all-text" @click="contentToggle()">
          <span>{{btnText}}</span>
          <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
        </div>
        <div class="btn">
          <el-button v-if="!isOver && !isBefore" type="primary" @click="dialogFormVisible = true">我要参与</el-button>
          <el-button v-if="isOver" type="primary" :disabled="true">活动已结束</el-button>
          <el-button v-if="isBefore" type="primary" :disabled="true">活动未开始</el-button>
        </div>
      </div>
    </div>

    <div class="xui-grid-avg-2 xui-padding-horizontal-children-sm xui-margin-top">
      <div class="xui-margin-bottom" v-for="(item,index) in artList" :key="index" @click="showArtDetail(item.id)">
        <div class="creative-act-card">
          <img-box :imgSrc="item.imgUrl" width="100%" height="230"></img-box>
          <div class="card-body">
            <h3 class="xui-text-truncate">{{item.title}}</h3>
            <span class="name color-gray">{{item.uname}}</span>
            <div class="xui-fc">
              <span class="xui-fl color-gray">{{item.actTime}}</span>
              <div class="xui-fr">
                <span class="xui-fl color-gray xui-margin-right-md">
                  <i class="iconfont icon-eye"></i> {{item.browsNum}}</span>
                <span class="xui-fl color-gray xui-margin-right-md">
                  <i class="iconfont icon-BAI-pinglun"></i> {{item.comment}}</span>
                <span class="xui-fl color-gray">
                  <i class="iconfont icon-dianzan"></i> {{item.agree}}</span>
              </div>

            </div>
          </div>
          <!--转发-->
          <div class="forwording"></div>
        </div>
      </div>
    </div>

    <!--我要参与弹出框-->
    <el-dialog title="我要参加" width="600px" :visible.sync="dialogFormVisible">
      <join :id="actId" @done="dialogFormVisible = false"></join>
    </el-dialog>

    <!--作品详情-->
    <el-dialog title="作品详情" :visible.sync="dialogVisible" width="650px" @close="refreshData">
      <production :detail="artDetail"></production>
    </el-dialog>
  </div>
</template>
<script>
  import ContentHeader from "../../../components/widge/content-header";
  import ImgBox from "../../../components/widge/img-box";
  import pic from "@/assets/images/example/wenc.png";
  import Join from "./join";
  import Production from "./production";
  import {
    getActDetail,
    getArtList,
    getArtDetail,
    getArtCommentList,
    postMyComment
  } from "@/api/specExhib";
  import {
    addBrowseNum
  } from "@/api/detail";

  export default {
    components: {
      ImgBox,
      ContentHeader,
      Join,
      Production
    },
    data() {
      return {
        isActive: false,
        curHeight: 0,
        bodyHeight: 999999999999,
        btnText: "展开全文",
        pic,
        dialogFormVisible: false,
        imageUrl: "",
        dialogVisible: false,
        actDetail: {
          title: "",
          content: "",
          imgUrl: ""
        },
        artList: [],
        artDetail: {
          title: "",
          content: "",
          urls: [],
          imgUrl: "",
          isAgree: "N",
          uname: "",
          agree: null,
          comment: null
        }
      };
    },
    computed: {
      actId() {
        return this.$route.params.id;
      },
      userId() {
        return this.$store.getters.userId;
      },
      isOver() {
        let d = new Date();
        let cur = Date.parse(d);
        return cur > this.actDetail.endTime;
      },
      isBefore() {
        let d = new Date();
        let cur = Date.parse(d);
        return cur < this.actDetail.startTime;
      }
    },
    methods: {
      contentToggle() {
        this.curHeight = this.$refs.bodyFont.offsetHeight;
        if (this.curHeight < this.bodyHeight) {
          this.isActive = !this.isActive;
          this.btnText = this.isActive === true ? "收起" : "展开全文";
        } else {
          this.btnText = "展开全文";
        }
      },
      getActDetail() {
        getActDetail(this.actId).then(res => {
          this.actDetail = res.data;
        });
      },
      getArtList() {
        getArtList(this.actId, this.userId).then(res => {
          this.artList = res.data.recordsList;
        });
      },
      getArtDetail(id) {
        return new Promise((resolve, reject) => {
          getArtDetail(id, this.userId).then(res => {
            this.artDetail = res.data;
            resolve();
          });
        });
      },
      showArtDetail(artId) {
        this.getArtDetail(artId).then(res => {
          this.dialogVisible = true;
        });
      },
      joinDone() {
        this.dialogFormVisible = false;
        this.getArtList();
      },
      addBrowseNum() {
        addBrowseNum(this.actId, 6);
      },
      //刷新数据
      refreshData() {
        this.getActDetail();
        this.getArtList();
        this.addBrowseNum();
      }
    },
    mounted() {
      this.getActDetail();
      this.getArtList();
      this.addBrowseNum();
    }
  };

</script>

<style lang="less" scoped>
  .bodyHeight {
    height: auto !important;
  }

  .bodyFont {
    height: 68px;
    overflow: hidden;
    max-height: 100%;
  }

  .header {
    border-bottom: 1px solid #bf9c51;
    .header-content {
      position: relative;
      .title-content {
        background: url("../../../assets/images/Winchance/title_bg.png") left top no-repeat;
        height: 27px;
        padding-left: 20px;
      }
      h3 {
        background: url("../../../assets/images/Winchance/title_bg.png") no-repeat right bottom;
        font-weight: normal;
        height: 27px;
        line-height: 27px;
        padding-right: 20px;
        display: inline-block;
        max-width: 100%;
      }
      p {
        font-size: 14px;
        line-height: 30px;
        padding-right: 216px;
      }
      .all-text {
        width: 100px;
        cursor: pointer;
        span {
          font-size: 14px;
          color: #dbad23;
        }
        i {
          color: #bf9c51;
        }
      }
      .btn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  .xui-grid-avg-2.xui-padding-horizontal-children-sm {
    margin-left: -5px;
    margin-right: -5px;
  }

  .creative-act-card {
    border: 1px solid #d2d2d2;
    transition: border-color 0.25s;
    position: relative;
    cursor: pointer;
    .card-body {
      padding: 10px 15px;
      position: relative;
      .name {
        position: absolute;
        right: 16px;
        top: 14px;
        font-size: 14px;
      }
      h3 {
        font-size: 17px;
        margin-bottom: 4px;
      }
      span {
        font-size: 12px;
        i {
          vertical-align: middle;
        }
      }
    }
    .forwording {
      width: 36px;
      height: 36px;
      position: absolute;
      right: 0;
      top: 0;
      background: url("../../../assets/images/Winchance/zhuanfa.png") no-repeat 0% 100%;
    }
  }

  .creative-act-card:hover {
    border-color: #bf9c51;
  }

  .dialog-footer {
    text-align: center;
  }

  .el-button {
    display: inline-block;
  }

</style>
